<template>
  <div>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in cards" :key="index">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-icon" :style="{background: item.color}">
              <el-icon :size="24"><component :is="item.icon" /></el-icon>
            </div>
            <div class="card-text">
              <div class="card-title">{{ item.title }}</div>
              <div class="card-value">{{ item.value }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
    <h2>其他内容</h2>
  </div>
</template>

<script setup>
import { User, ShoppingCart, Money, List } from '@element-plus/icons-vue'

const cards = [
  { title: '用户数', value: '1,234', icon: User, color: '#409EFF' },
  { title: '订单数', value: '567', icon: ShoppingCart, color: '#67C23A' },
  { title: '销售额', value: '¥89,000', icon: Money, color: '#E6A23C' },
  { title: '任务数', value: '89', icon: List, color: '#F56C6C' }
]
</script>

<style scoped>
.card-content {
  display: flex;
  align-items: center;
}
.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
}
.card-text {
  flex: 1;
}
.card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}
.card-value {
  font-size: 22px;
  font-weight: bold;
}
</style>
